<!--  -->
<template>
  <div class="songlistItem mf" @click="toDetail"> 
      <div>
          <img :src="songlist.img" alt="" srcset="">
      </div>
      <div class="names mf">
          <div class="title">{{songlist.name}}</div>
          <div class="desc" v-html="songlist.desc"></div>
      </div>
  </div>
</template>

<script>
import {SongList} from "model/song"

export default {
    props: {
        songlist: {
            type: SongList
        },
        path: {
            type: String,
            default: false
        }
    },
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  methods: {
      toDetail(){
          this.$router.push({
              path: this.path,
              query: this.songlist
          })
      }
  }
}

</script>
<style scoped>
    div {
        /* border: 1px solid; */
    }
    .songlistItem  {
        margin: 10px 25px;
    }
    .songlistItem  img {
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }
    .songlistItem .names{
        flex: 1;
        position: relative;
        flex-direction: column;
        justify-content:space-between;
    }
    .title{
        font-size: 16px;
    }
    .desc{
        font-size: 14px;
        color: var(--color-text-d);
        padding-bottom: 4px;
    }
</style>